<script setup>
import SearchInput from './SearchInput.vue'
import {ref} from 'vue'
import {useRoute,useRouter} from "vue-router"
import api from '@/api/index.js'
import { getSalesVolume } from "@/utils/index.js"

const route = useRoute()
const router = useRouter()
const IMAGEURL = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'

const list = ref([])
const actionId = ref('')


const getClassList = () => {
  api.getClassificationList({
    id: route.params.id
  }).then((res) => {
    console.log(res)
    list.value = res.data.trees ?? []
    actionId.value = res.data.trees[0]?.id
    getCommodityList()
  })
}
getClassList()

const classificationClick = (item) => {
  actionId.value = item.id
  getCommodityList()
}

const dataList = ref([])
const getCommodityList = () => {
  api.getClassificationCommodityList({
    merchantId: route.params.id,
    goodsKindId: actionId.value,
    pageNum: 1,
    pageSize: 9999
  }).then((res) => {
    console.log('res->', res)
    dataList.value = res?.list ?? []
  })
}

const gpCommodityClick = (id) => {
  router.push({
    name: 'ScenicMerchantsCommodity',
    query: {
      commodityId: route.params.id,
      shopId: id
    }
  })
}
</script>

<template>
<div class="content">
  <SearchInput />
  <div class="classification_content">
    <ul class="left_classification">
      <li
        v-for="item in list"
        :key="item.id"
        :class="[actionId === item.id ? 'aciton_classification' : '' ,'classification']"
        @click="classificationClick(item)"
      >
        <div class="line"></div>
        <div class="name">{{ item.classificationName }}</div>
      </li>

    </ul>
    <ul class="right_content">
      <li @click="gpCommodityClick(item.id)" v-for="(item, index) in dataList" :key="index" class="card">
        <van-image
          lazy-load
          height="10rem"
          fit="contain"
          :src="IMAGEURL"
          radius=".8rem"
        >
        </van-image>
        <div class="card_right">
          <div class="card_right_top">
            <div class="name">{{ item.name }}</div>
            <div class="tag_list">
              <div class="tag">月售{{ getSalesVolume(item.soldOut || 0)}}份</div>
            </div>
          </div>
          <div class="card_right_botom">
            <div class="price_box">
              <div class="icon">￥</div>
              <div class="price">{{ item.price }}</div>
              <div class="qi">起</div>
              <div v-if="item.oriPrice" class="price-">￥{{item.oriPrice}}</div>
            </div>
            <div class="book">预订</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
</template>

<style scoped lang="scss">
.content{
  position: fixed;
  top: calc(4.6rem + 17rem - 3rem);
  left:0;
  right: 0;
  height: calc(100vh - 4.6rem - 17rem + 3rem);
  border-top-right-radius: 3rem;
  border-top-left-radius: 3rem;
  background: #FFFFFF;
  .classification_content{
    display: flex;
    height: calc(100% - 6.5rem);
    .left_classification{
      width: 7.6rem;
      height: 100%;
      overflow-y: auto;
      margin-bottom: 2rem;
      .classification{
        display: flex;
        align-items: center;
        height: 5rem;
        background: rgba(79,172,145,0.05);
        font-size: 1.3rem;
        font-weight: bold;
        color: #666666;
        box-sizing: border-box;
        .name{
          padding-left: 1.2rem;
        }
      }
      .aciton_classification{
        background: #FFFFFF;
        .line{
          width: .5rem;
          height: 2rem;
          background: linear-gradient(360deg, #4FAC91 0%, #ECE3AA 83%);
          border-radius: .3rem;
          opacity: 1;
        }
        .name{
          padding-left: .7rem;
        }
      }
    }
    .right_content{
      flex:1;
      height: 100%;
      overflow-y: auto;
      .card{
        display: flex;
        padding-right: 1rem;
        margin-bottom: 3.2rem;
        .card_right{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 1rem;
          .card_right_top{
            .name{
              height: 2rem;
              font-size: 1.4rem;
              font-weight: bold;
              color: #333333;
              line-height: 2rem;
            }
            .tag_list{
              display: flex;
              flex-wrap: wrap;
              .tag{
                padding: 0 .5rem;
                background: rgba(0,0,0,0.06);
                border-radius: .3rem;
                opacity: 1;
                height: 1.7rem;
                line-height: 1.7rem;
                font-size: 1.2rem;
                color: #666666;
              }
            }
          }
          .card_right_botom{
            display: flex;
            justify-content: space-between;
            .price_box{
              display: flex;
              align-items: flex-end;
              color: #ED6316;
              .icon{
                font-size: 1.4rem;
                font-weight: normal;
              }
              .price{
                font-size: 1.8rem;
                font-weight: normal;
                position: relative;
                top: .2rem;
                padding: 0 .1rem;
              }
              .qi{
                font-size: 12px;
                font-weight: normal;
              }
              .price-{
                font-size: 1.2rem;
                font-weight: normal;
                color: #999999;
                text-decoration: line-through;
                padding-left: .2rem;
              }
            }
            .book{
              height: 3rem;
              line-height: 3rem;
              background: rgba(79,172,145,0.1);
              border-radius: .5rem;
              opacity: 1;
              padding: 0 .8rem;
              font-size: 1.4rem;
              color: var(--van-primary-color);
            }
          }
        }
      }
    }
  }
}
</style>